import { createFields } from "@/pages/Admin/Component/ResourceList/Edit";
import { useMemo, useState } from "react";
import { Fields } from "../../Component/ResourceList/Fields";
import { Form } from "antd";
import Images, { uploadValidate } from "../ScienceVenue/Images";
import styles from "./styles.module.scss";
import { FormInstance } from "antd/lib";
import { LibAppView } from "@/lib";
const EditRouteLine = ({ data, form, disabled }: { data: any, disabled: boolean, form:FormInstance }) => {
    const [ beforeHookData, setBeforeHookData ] = useState({});
    const journeyData = LibAppView.useJourneyData();
    const editData = journeyData.currentStepState || {};
    const fields = useMemo(() => {
            return createFields([{
                label: "路线点位名称",
                name: "title",
                type: "Input",
                required: true,
                props: {
                    placeholder: "需明确体现科普主题（如：“智慧农业”科技实践研学活动）。"
                }
            }, {
                label: "详细地址",
                name: "addr",
                type: "Input",
                required: true,
                props: {
                    placeholder: "精准定位的门牌地址"
                }
            }, {
                label: "线路点位简介",
                name: "description",
                type: "TextArea",
                required: true,
                props: {
                    placeholder: "50字以内，精简说明该点位科普活动特色。"
                }
            }, {
                label: "排序",
                name: "sortId",
                type: "Input",
                props: { type: "number" }
            },{
                label: "研学点位主图",
                name: "cover",
                type: "Cover",
                required: true,
                props: {
                    validate: uploadValidate,
                    description: ( <section className={styles.imageSizeRequirement}>
                        <h4>图片要求</h4>
                        <p>1. 图片格式统一为“JPG”格式。</p>
                        <p>2. 单张图片大小需≤1MB，分辨率≥300dpi，画质清晰，主题突出。</p>
                    </section>)
                }
            }, {
                label: "线路点位展示图片",
                name: "images",
                type: "Custom",
                Component: Images,
                fullColumn: true,
                required: true,
                props: {
                    validate: uploadValidate,
                    reviewRight: editData?.status > 0,
                }
            }
        ]);
    }, []);
    const formItemFiels = useMemo(() => {
        return fields.map((item) => {
            const rules = item.rules || [];
            return {
                ...item,
                rules: rules.length > 0 ? rules.map((item) => {
                    if(typeof (item as any).validator === "function") {
                        return {
                            ...item,
                            validator: (...args: any[]) => {
                                return (item as any).validator(...args, form);
                            }
                        };
                    } else {
                        return {
                            ...item
                        };
                    }
                }) : null
            }
        })
    }, [fields, form]);
    return (
        <Form
            labelCol={{ span:  5 }}
            wrapperCol={{ span: 16 }}
            layout="horizontal"
            // disabled={componentDisabled}
            form={form}
            initialValues={data}
        >
            <Fields form={form} fields={formItemFiels as any[]} disabled={disabled} data={beforeHookData} />
            <div style={{ height: 0, opacity: 0}}>
                <Form.Item name="index"/>
                <Form.Item name="id"/>
                <Form.Item name="sortId" />
            </div>
        </Form>
    );
};

export default EditRouteLine;
